<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>{echo:$this->_siteConfig->name}</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	{js:jquery}
	{js:form}
	{js:validate}
	{js:dialog}
	{js:artTemplate}
	<!--[if IE]><script src="{theme:javascript/html5.js}"></script><![endif]-->
	<script src="{theme:javascript/common.js}"></script>
	<script src='{theme:javascript/site.js}'></script>
	<script type="text/javascript" src="{theme:javascript/jquery-ui.min.js}"></script>
	<script type="text/javascript" src="{theme:javascript/chat.js}"></script>
	<link rel="stylesheet" href="{skin:style/style.css}">
	<link rel="stylesheet" href="{skin:style/chat.css}">
	
</head>
<body>
{set:$ava_img}

<!-- 右边竖条  s-->
<div class="right">
	<span>在线联系</span>
	
	{if:$this->user}
		{foreach:items=$this->user key=$k $item=$v}
			key:{$k}---value:{$v}<br/>
		{/foreach}
		
		{set:$uid = $this->user['user_id']}
		{query:name = user where= id eq $uid item=$first } 
			{set:$ava_img=$first['head_ico']}
		{/query}
		<input class="self_id" type="hidden" value="{$this->user['user_id']}"/>
		<input class="self_name" type="hidden" value="{$this->user['username']}"/>
		<div class="message" id="showFriend" >
			<a href="javascript:"></a>
		</div>
		{else:}
		<input class="self_id" type="hidden" value=""/>
		<input class="self_name" type="hidden" value=""/>
		<div class="message" id="login">
			<a href="{url:/simple/login}"></a>
		</div>	
	{/if}
		
	
	
</div>

<!-- 右边竖条  e-->

{if:$this->user}
<!-- 聊天窗口我好友列表   s -->
<div class="chat_list">
	<div class="chat_top">
		<h1>
			<i></i>
			联系人
		</h1>
		<span class="close"></span>		
	</div>
	{set:$f_uid} <!-- 对方的id -->
	{set:$nf_uid}
	<!-- 好友列表 s -->
	<div class="chat_user">
		<dl class="chat_user_friend">
			<dt>
				我的好友
				<span class="show"></span>
			</dt>
			<!-- 查找好友表 -->
			{query:name = friends where= (f_id eq $this->user['user_id'] or t_id eq $this->user['user_id']) and state eq 1}
				
				{if:$item['f_id'] == $this->user['user_id']}
					{set:$f_uid = $item['t_id']}
				{else:}
					{set:$f_uid = $item['f_id']}	
				{/if}	
				
			<dd title="你好" from_id = "{$f_uid}">
				<span class="user_avatar">
						 {query:name = user where= id eq $f_uid item=$first } 
						 	{if:$first['head_ico'] == ""}
						 		<img alt="" src="{skin:image/car.jpg}"> 
						 		{else:}
						 		<img alt="" src="{webroot:$first['head_ico']}"> 
						 	{/if}
							<!-- {set:$ava_img1=$first['head_ico1']} -->
						{/query}
					<i class="offline" f_id="{$f_uid}"></i>
				</span>
				
				{if:$item['f_id'] == $this->user['user_id']}
					<h5>{$item['t_name']}</h5>
					<a href="javascript:"  onclick="talk({$this->user['user_id']},{$item['t_id']},{$item['id']},'{$ava_img}','{$item['t_name']}')"></a>
					{else:}
					<h5>{$item['f_name']}</h5>
					<a href="javascript:"  onclick="talk({$this->user['user_id']},{$item['f_id']},{$item['id']},'{$ava_img}'),'{$item['f_name']}' "></a>
				{/if} 
				
			</dd>
			{/query}
		</dl>
		
		<dl class="chat_user_recent">
			<dt>
				最近联系人
				<span class="show"></span>
			</dt>
			
			{set:$l_uid}
			<!-- 查找临时的人 -->
	{query:name = friends where=(f_id eq $this->user['user_id'] or t_id eq $this->user['user_id']) and state eq 0}
			
			{if:$item['f_id'] == $this->user['user_id']}
				{set:$l_uid = $item['t_id']}
			{else:}
				{set:$l_uid = $item['f_id']}
			{/if}
				
			<dd title="你好   {$l_uid}" from_id = "{$l_uid}">
				<span class="user_avatar">
					
						{query:name = user where= id eq $l_uid item=$first } 
						 	{if:$first['head_ico'] == ""}
						 		<img alt="" src="{skin:image/logo.png}"> 
						 		{else:}
						 		<img alt="" src="{webroot:$first['head_ico']}"> 
						 	{/if}
							<!-- {set:$ava_img1=$first['head_ico1']} -->
						{/query}
						<i class="offline" f_id="{$l_uid}"></i>
				</span>
					{if:$item['f_id'] == $this->user['user_id']}
					<h5>{$item['t_name']}</h5>
					<a href="javascript:"  onclick="talk({$this->user['user_id']},{$item['t_id']},{$item['id']},'{$ava_img}','{$item['t_name']}')"></a>
					{else:}
					<h5>{$item['f_name']}</h5>
					<a href="javascript:"  onclick="talk({$this->user['user_id']},{$item['f_id']},{$item['id']},'{$ava_img}','{$item['f_name']}')"></a>
				{/if}
			</dd>
			{/query}
		</dl>
	</div>
	
</div>
{/if}
<!-- 聊天窗口我好友列表 e -->


{if:$this->user}
<!-- 聊天窗口内容接收与发送 s msg-dialog 1-->
{set:$i=1}	
{set:$to_Id}
{set:$to_uname}
{set:$ava}
{query:name = friends where=f_id eq $this->user['user_id'] or t_id eq $this->user['user_id']}
		{if:$item['f_id'] == $this->user['user_id']}
			{set:$to_Id = $item['t_id']}
			{else:}
			{set:$to_Id = $item['f_id']}
		{/if}
		
		{query:name = user where= id eq $to_Id item=$first }
			{set:$to_uname = $first['username']}
			{if:$first['head_ico'] == ""}
				{set:$ava = ''}
			{else:}
				{set:$ava = $first['head_ico']}
			{/if}
		{/query}
		
<div class="msg-dialog isshow{$item['id']}" id="dialog" draggable="false" from_id="">
	<div id="dialog_header" class="d_h" value="{$i}" draggable="true">
	{if:$ava == ""}
		<img class="to_user_img" alt="" src="{skin:image/car.jpg}"> 
		{else:}
		<img class="to_user_img" alt="" src="{webroot:$ava}"> 
	{/if}
		<span>{$to_uname}</span>
		<div class="close_big">
			<span>×</span>
		</div>
	</div>
	
	
	<input class="to" type="hidden" value="{$to_Name}"/>
	
	<!-- 聊天记录 -->
	<div class="dialog-body">
		<!-- 用户的聊天内容 -->
		<div class="msg_list">
			<div class="chat_con"> 
				<!-- 发送者信息 -->
			<!--	<div class="to_user">
					<span class="user-avatar">
						<img alt="" src="{webroot:$user_ico}">
					</span>-->
					<!-- 发送给用户的内容 s-->
					<!--<dl>
						<dt>2017-05-16 10:49:19</dt>
						<dd>kdf;msdlfmmsdlfmsdklfmsdklmsdlfmmsdlfmsdklfmsdklgsdklfmsdklggsdklfmsdklg</dd>
						<dd class="arrow"></dd>
					</dl>
				</div>-->
				<!-- 发送给用户的内容 e-->
				
				<!-- 接收用户的内容  s-->
				<!-- <div class="from_user">
					<span class="user-avatar">
						<img alt="" src="{skin:image/logo.png}">
					</span> -->
					<!-- 发送内容 -->
					<!--<dl>
						<dt>2017-05-16 10:49:19</dt>
						<dd>kdf;msdlfmmsklmsdlfmmsklfklfmsdklgmsdlfmmsklfklfmsdklgfklfmsdklg</dd>
						<dd class="arrow"></dd>
					</dl>
				</div> -->
				<!-- 接收用户的内容 e-->
				
			</div>
		</div>
		<div class="msg-input-box">
			<!-- 表情栏 s-->
			<div class="msg-input-title">
				<span class="chat_show">
					<img alt="" src="{skin:image/show.png}">
				</span>
				
				<span class="chat_phpne">
					<img alt="" src="{skin:image/photo.png}">
				</span>
				
				<span class="message">
					消息记录
					<img alt="" src="{skin:image/down.png}">
				</span>
			</div>
			<!-- 表情栏 e-->
			
			<!-- 内容输入框 s-->
			<textarea class="send_message"></textarea>
			<!-- 内容输入框 e-->
			<span class="ad"><a href="#">广告词可以在这里加链接</a></span>
			<span class="send_btn" ><a href="javascript:">发送消息</a></span>
						
		</div>
	</div>
	
	<div class="dialog_chat_right" >
		<!-- 消息记录 -->
	</div>
	
</div>
{set:$i=$i+1}	
{/query}
{/if}
<!-- 聊天窗口内容接收与发送 s msg-dialog-->


<!--

模版使用字体图标为优化过的 awesome 3.0 图标字体库

使用帮助见:http://www.bootcss.com/p/font-awesome/

 -->
<div class="header_top">
	<div class="web">
		<div class="welcome">
			欢迎您来到 {echo:$this->_siteConfig->name}！
			{if:$this->user}
				<a href="{url:/ucenter/index}">个人中心</a>
				<a href="{url:/simple/logout}">退出</a>
			{else:}
				<a href="{url:/simple/login}">登录</a>
				<a class="reg" href="{url:/simple/reg}">免费注册</a>
			{/if}
		</div>
		<div class="header_cart" name="mycart">
			<a href="{url:/simple/cart}" class="go_cart">
				<i class="icon-shopping-cart"></i>
				购物车（<em class="count" name="mycart_count"]>0</em>）
			</a>
			<div class="cart_simple" id="div_mycart"></div>
		</div>
		<!--购物车模板 开始-->
		<script type='text/html' id='cartTemplete'>
		<div class='cart_panel'>
			<ul class='cart_list'>
				<%for(var item in goodsData){%>
				<%var data = goodsData[item]%>
				<li id="site_cart_dd_<%=item%>">
					<em>共<%=data['count']%>件</em>
					<a target="_blank" href="{url:/site/products/id/<%=data['goods_id']%>}">
						<img src="{webroot:<%=data['img']%>}">
						<h5><%=data['name']%></h5>
					</a>
					<span>￥ <%=data['sell_price']%></span>
					<del onclick="removeCart('<%=data['id']%>','<%=data['type']%>');$('#site_cart_dd_<%=item%>').hide('slow');">删除</del>
				</li>
				<%}%>
				<%if(goodsCount){%>
				<div class="cart_total">
					<p>共<span name="mycart_count"><%=goodsCount%></span>件商品</p>
					<p>商品总额：<em name="mycart_sum">￥<%=goodsSum%></em></p>
					<a href="{url:simple/cart}">去购物车结算</a>
				</div>
				<%}else{%>
				<div class='cart_no'>购物车空空如也~</div>
				<%}%>
			</ul>
		</div>
		</script>
		<ul class="top_tool">
			<li><a href="{url:ucenter/index}">个人中心</a></li>
			<li><a href="{url:/simple/seller}">申请开店</a></li>
			<li><a href="{url:/seller/index}">商家管理</a></li>
			<li><a href="{url:/site/help_list}">使用帮助</a></li>
		</ul>
	</div>
</div>

<?php
	
	//获取板块信息
	//echo "session is <br/>";
	$type   = ISession::get('plate_type');
	//$type = $plate_type[0]['plate_id'];
	
?>



<header class="header web">
	<nav class="header_nav">
		<div class="goods_nav">
			<h1 class="logo">
				<!-- 这里的LOGO图片会自动靠左居中.因此只需要制作一个透明的LOGO图片即可 LOGO最大尺寸 200*90 -->
				<a href="{url:}">
					<img src="{if:$this->_siteConfig->logo}{webroot:$this->_siteConfig->logo}{else:}{skin:image/logo.png}{/if}">
				</a>
			</h1>
			<ul class="cat_list none">
				{foreach:items=Api::run('getCategoryListTop')  item=$first}
				{if:$first['plate'] == $type}
							
				<li>
					<h3><a href="{url:/site/pro_list/cat/$first[id]}">{$first['name']}</a></h3>
					<div class="cat_more">
						<ul>
							{foreach:items=Api::run('getCategoryExtendList',array('#categroy_id#',$first['id']),24)}
							<li>
								<a href="{url:/site/products/id/$item[id]}" target="_blank" title="{$item['name']}">
									<img class="img-lazyload" src="{url:/pic/thumb/img/$item[img]/w/40/h/40}" alt="{$item['name']}">
									<strong>{$item['name']}</strong>
									<em>选购</em>
								</a>
							</li>
							{/foreach}
						</ul>
					</div>
				</li>
				{/if}
				{/foreach}
			</ul>
		</div>
		<ul class="site_nav">
			<li><a href="{url:/site/index}">首页</a></li>
			{foreach:items=Api::run('getGuideList')}
			<li><a href="{url:$item[link]}">{$item['name']}</a></li>
			{/foreach}
		</ul>
	</nav>
	<div class="header_search">
		<form method='get' action='{url:/}'>
			<input type='hidden' name='controller' value='site'>
			<input type='hidden' name='action' value='search_list'>
			<div class="search_box">
				<input class="input_keywords" type="text" name='word' autocomplete="off" placeholder="输入关键词">
				<label class="input_submits">
					<input type="submit" value="">
					<i class="icon-search"></i>
				</label>
			</div>
		</form>
		<div class="hot_words">
			{foreach:items=Api::run('getKeywordList',2) }
			{set:$tmpWord = urlencode($item['word']);}
			<a href="{url:/site/search_list/word/$tmpWord}">{$item['word']}</a>
			{/foreach}
		</div>
	</div>

</header>

<!--主要模板内容 开始-->
{viewcontent}
<!--主要模板内容 结束-->

<footer class="foot">
	<section class="service">
		<ul>
			<li class="item1">
				<i class="icon-star"></i>
				<strong>正品优选</strong>
			</li>
			<li class="item2">
				<i class="icon-globe"></i>
				<strong>上市公司</strong>
			</li>
			<li class="item3">
				<i class="icon-group"></i>
				<strong>300家连锁门店</strong>
			</li>
			<li class="item4">
				<i class="icon-plane"></i>
				<strong>长株潭次日达</strong>
			</li>
			<li class="item5">
				<i class="icon-gift"></i>
				<strong>满99包邮</strong>
			</li>
		</ul>
	</section>
	<section class="help">
		{set:$catIco = array('help-new','help-delivery','help-pay','help-user','help-service')}
		{foreach:items=Api::run('getHelpCategoryFoot') item=$helpCat}
		<dl class="help_{echo:$key+1}">
			<dt>{$helpCat['name']}</dt>
			{foreach:items=Api::run('getHelpListByCatidAll',array('#cat_id#',$helpCat['id']))}
			<dd><a href="{url:/site/help/id/$item[id]}">{$item['name']}</a></dd>
			{/foreach}
		</dl>
		{/foreach}
		<div class="contact">
			<em>400-888-8888</em>
			<span>周一到周日 8:00-18:00</span>
			<span>（仅收市话费）</span>
			<a href="#"><i class="icon-comments"></i> 24小时在线客服</a>
		</div>
	</section>
	<section class="copy">
		{echo:IFilter::stripSlash($this->_siteConfig->site_footer_code)}
	</section>
</footer>



</body>
</html>
<script>
//当首页时隐藏分类
{if:IWeb::$app->getController()->getId() == 'site' && IWeb::$app->getController()->getAction()->getId() == 'index'}
$('.cat_list').removeClass('none');
{/if}

$(function(){
	
	//$( "#date" ).datepicker();
	$('input:text[name="word"]').val("{$this->word}");
	
	//聊天
	$(".message").mouseover(function(){
		$(".right span").show();
	});
	
	$(".message").mouseout(function(){
		$(".right span").hide();
	});
	
	
	
	//响应拖拽
	var dh = $(".d_h");
	for(var i=0; i < dh.length; ++i){
		var dialog_header = dh[i];
		var flag = false;
		
		/*
		dialog_header.addEventListener('touchstart',function(){
			flag = true;
			var index = $(this).attr("value");
			test(flag,index-1);
		},false);
		
		
		dialog_header.addEventListener('touchend',function(){
			flag = false;
			var index = $(this).attr("value");
			test(flag,index-1);
		},false);
		*/
		
		dialog_header.ondragstart  = function(){
			flag = true;
			var index = $(this).attr("value");
			
			test(flag,index-1);
			
		}
		
		dialog_header.ondragend = function(){
			console.log("down");
			flag = false;
			var index = $(this).attr("value");
			test(flag,index-1);
		}
	}
	
	
	//console.log("dh is ");
	//console.log(dialog_header);
	//var dialog_header = document.getElementById("dialog_header");
	
	
});

//拖动窗口响应
function test(flag,index){
	if(!flag){
		//document.getElementById("dialog").draggable = false;
		$(".msg-dialog")[index].draggable = false;
		return ;
	}
	//document.getElementById("dialog").draggable = true;
	var md = $(".msg-dialog");
	md[index].draggable = true;
	/*
	for(var i=0;i<md.length;++i){
		md[i].draggable = true;
	}*/
	//console.log(this);
	//$(".msg-dialog").html().draggable = true;
	//var dragdiv = document.querySelector(".msg-dialog");
	
	var dragdiv = md[index];
   	var x, y;  //记录到点击时鼠标到移动框左边和上边的距离

    dragdiv.addEventListener('dragstart', function (e) {
        e.dataTransfer.effectAllowed = "move";  //移动效果
        e.dataTransfer.setData("text", '');  //附加数据，　没有这一项，firefox中无法移动
        x = e.offsetX || e.layerX;
        y = e.offsetY || e.layerY;
        return true;
    }, false);

    document.addEventListener('dragover', function (e) {//取消冒泡 ,不取消则不能触发 drop事件
        e.preventDefault()|| e.stopPropagation();
    }, false);

    document.addEventListener('drop', function (e) {
        dragdiv.style.left = (e.pageX - x) + 'px';
        dragdiv.style.top = (e.pageY - y) + 'px';
        e.preventDefault() || e.stopPropagation();  //不取消，firefox中会触发网页跳转到查找setData中的内容
    }, false);
}


</script>
